<template>
  <footer class="footer">
    <div class="item1">
      <div class="left">
        <div class="items" v-for="(item, index) in menus" :key="index">
          <div class="title">{{ item.title }}</div>
          <div class="item">
            <div
              v-for="(child, k) in item.list"
              :key="k"
              @click="goLink(child.url)"
            >
              {{ child.title }}
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="items">
          <div class="title">{{ $t("联系我们") }}</div>
          <div class="text">400-806-6598</div>
        </div>
        <div class="img-box">
          <img class="img" src="~/assets/images/c_dinyue.png" alt="" />
          <div class="text">{{ $t("订阅我们") }}</div>
        </div>
      </div>
    </div>
    <div class="mobile-footer">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item
          :title="item.title"
          :name="index"
          v-for="(item, index) in menus"
          :key="index"
        >
          <div
            v-for="(child, k) in item.list"
            :key="k"
            @click="goLink(child.url)"
          >
            {{ child.title }}
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="mobile-item1">
      <div class="items">
        <div class="top-box">
          <div class="title">{{ $t("联系我们") }}</div>
          <div class="text">400-806-6598</div>
        </div>
        <div class="bottom-box">
          <img
            src="~/assets/images/WeChat.png"
            alt=""
            @click="dialogVisible = true"
          />
        </div>
      </div>
      <el-dialog :visible.sync="dialogVisible" width="60%">
        <div class="code-box">
          <div class="item">
            <img src="~/assets/images/c_dinyue.png" alt="" class="img" />
            <div class="title">{{ $t("订阅我们") }}</div>
          </div>
        </div>
      </el-dialog>
    </div>
    <div class="item2">
      <div class="text">{{ $t("ICP备案/许可证编号") }}:粤ICP备16035820号</div>
      <div class="text">
        {{ $t("深圳易宝智能硬件有限公司版权所有") }} Copyright © 2022
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  data() {
    return {
      activeName: 0,
      menus: [],
      dialogVisible: false,
    };
  },
  async fetch() {
    const res = await this.$indexApi.getNavbarData();
    // console.log(res.data);
    this.menus = res.data;
  },
  methods: {
    goLink(url) {
      window.open(url, "_blank");
    },
  },
};
</script>

<style lang="less" scoped>
.footer {
  background: #000000;
  .item1 {
    display: flex;
    gap: 100rem;
    padding: 30rem 0 100rem;
    border-bottom: 1px solid #1a1a1a;
    justify-content: center;
    white-space: nowrap;
    .left {
      display: flex;
      gap: 70rem;
      .items {
        min-width: 140rem;
        cursor: pointer;
        .title {
          font-size: 22rem;
          font-weight: 500;
          color: #ffffff;
          margin-bottom: 38rem;
        }
        .item {
          font-size: 18rem;
          color: #999999;
          display: flex;
          flex-direction: column;
          gap: 23rem;
        }
      }
    }
    .right {
      display: flex;
      gap: 150rem;
      font-weight: 500;
      color: #ffffff;
      .items {
        min-width: 230rem;
        .title {
          margin-bottom: 38rem;
          font-size: 22rem;
          font-family: Source Han Sans CN;
          font-weight: 400;
        }
        .text {
          font-size: 34rem;
          font-family: Source Han Sans CN;
          font-weight: 400;
        }
      }
      .img-box {
        display: flex;
        flex-direction: column;
        gap: 11rem;
        align-items: center;
        .img {
          width: 140rem;
          height: 140rem;
        }
        .text {
          font-size: 20rem;
        }
      }
    }
  }
  .mobile-footer,
  .mobile-item1 {
    display: none;
  }
  .item2 {
    line-height: 60rem;
    padding: 0 360rem;
    display: flex;
    justify-content: space-between;
    font-size: 18rem;
    font-weight: 300;
    color: #999999;
  }
}

@media (max-width: 900px) {
  .footer {
    padding: 7px 0;
    .item1 {
      display: none;
    }
    .mobile-footer {
      display: block;
      :deep(.el-collapse) {
        border-top: none;
        border-bottom: none;
        .el-collapse-item__header {
          background-color: unset;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #ffffff;
          border-bottom: 1px solid #333333;
          padding: 0 20px;
          .el-collapse-item__arrow::before {
            content: "＋";
            font-size: 20px;
            color: #fff;
          }
          .is-active::before {
            content: "－";
          }
        }
        .el-collapse-item__wrap {
          background-color: #333333;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          border-bottom: none;
          .el-collapse-item__content {
            color: #ffffff;
            padding: 15px 20px;
            display: flex;
            flex-direction: column;
            gap: 20px;
          }
        }
      }
    }
    .mobile-item1 {
      display: block;
      display: flex;
      justify-content: space-between;
      padding: 23px 20px;
      .items {
        display: flex;
        flex-direction: column;
        gap: 20px;

        .top-box {
          display: flex;
          align-items: center;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          gap: 10px;
          .title {
            color: #ffffff;
          }
          .text {
            color: #999999;
          }
        }
        .bottom-box {
          display: flex;
          align-items: center;
          gap: 10px;
          img {
            width: 32px;
            height: 32px;
          }
        }
      }
      .code-box {
        padding: 26rem;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        gap: 20px;

        .item {
          display: flex;
          flex-direction: column;
          align-items: center;

          .img {
            width: 160px;
          }
          .title {
            font-size: 18px;
          }
        }
      }
    }
    .item2 {
      height: 100%;
      padding: 18px 20px;
      flex-direction: column;
      font-size: 14px;
      gap: 5px;
      color: #999;
    }
  }
}
</style>
